Jassif Team Institution

CSS Flex Items

ஒரு flex container-ன் நேரடி குழந்தை உறுப்புகள் தானாகவே flex items ஆக மாறுகின்றன.

Flex items பின்வரும் பண்புகளைக் கொண்டிருக்கலாம்:

• order - Flex container-உள்ளே flex items-ன் காட்சி வரிசையை குறிப்பிடுகிறது
• flex-grow - மற்ற flex items-ஐ ஒப்பிடும்போது ஒரு flex item எவ்வளவு வளரும் என்பதை குறிப்பிடுகிறது
• flex-shrink - மற்ற flex items-ஐ ஒப்பிடும்போது ஒரு flex item எவ்வளவு சுருங்கும் என்பதை குறிப்பிடுகிறது
• flex-basis - ஒரு flex item-ன் ஆரம்ப நீளத்தை குறிப்பிடுகிறது
• flex - flex-grow, flex-shrink, மற்றும் flex-basis-க்கான சுருக்கப் பண்பு
• align-self - Flex container-உள்ளே flex item-ன் சீரமைப்பை குறிப்பிடுகிறது

CSS order பண்பு

order பண்பு flex container-உள்ளே flex items-ன் காட்சி வரிசையை குறிப்பிடுகிறது.

மூல குறியீட்டில் முதல் flex item கட்டமைப்பில் முதல் உருப்படியாக தோன்ற வேண்டியதில்லை.

order மதிப்பு ஒரு எண்ணாக இருக்க வேண்டும், மற்றும் இயல்புநிலை மதிப்பு 0 ஆகும்.

எடுத்துக்காட்டு

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

CSS flex-grow பண்பு

flex-grow பண்பு மற்ற flex items-ஐ ஒப்பிடும்போது ஒரு flex item எவ்வளவு வளரும் என்பதை குறிப்பிடுகிறது.

மதிப்பு ஒரு எண்ணாக இருக்க வேண்டும், மற்றும் இயல்புநிலை மதிப்பு 0 ஆகும்.

எடுத்துக்காட்டு

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 4">3</div>
</div>

மூன்றாவது flex item மற்ற flex items-ஐ விட நான்கு மடங்கு வேகமாக வளரும்.

CSS flex-shrink பண்பு

flex-shrink பண்பு மற்ற flex items-ஐ ஒப்பிடும்போது ஒரு flex item எவ்வளவு சுருங்கும் என்பதை குறிப்பிடுகிறது.

மதிப்பு ஒரு எண்ணாக இருக்க வேண்டும், மற்றும் இயல்புநிலை மதிப்பு 1 ஆகும்.

எடுத்துக்காட்டு

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 2">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

மூன்றாவது flex item மற்ற flex items-ஐ விட இரண்டு மடங்கு அதிகமாக சுருங்கும்.

CSS flex-basis பண்பு

flex-basis பண்பு ஒரு flex item-ன் ஆரம்ப நீளத்தை குறிப்பிடுகிறது.

எடுத்துக்காட்டு

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 250px">3</div>
  <div>4</div>
</div>

மூன்றாவது flex item-ன் ஆரம்ப நீளத்தை 250 பிக்சல்களாக அமைக்கிறது.

CSS flex பண்பு

flex பண்பு flex-grow, flex-shrink, மற்றும் flex-basis பண்புகளுக்கான சுருக்கப் பண்பாகும்.

எடுத்துக்காட்டு

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 1 0 150px">3</div>
  <div>4</div>
</div>

மூன்றாவது flex item-ஐ வளரக்கூடிய (1), சுருங்காத (0), மற்றும் 150 பிக்சல் ஆரம்ப நீளத்துடன் அமைக்கிறது.

CSS align-self பண்பு

align-self பண்பு நெகிழ் கொள்கலனுக்குள் தேர்ந்தெடுக்கப்பட்ட உருப்படியின் சீரமைப்பை குறிப்பிடுகிறது.

இந்தப் பண்பு கொள்கலனின் align-items பண்பால் அமைக்கப்பட்ட இயல்புநிலை சீரமைப்பை மேலெழுதுகிறது.

எடுத்துக்காட்டு 1

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

மூன்றாவது flex item-ஐ கொள்கலனின் நடுவில் சீரமைக்கிறது.

எடுத்துக்காட்டு 2

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

இரண்டாவது flex item-ஐ கொள்கலனின் மேல்பகுதியிலும், மூன்றாவது flex item-ஐ கொள்கலனின் கீழ்ப்பகுதியிலும் சீரமைக்கிறது.

பயிற்சி

.flex-container div {
  : 3;
}

CSS Flex Items பண்புகள்

பின்வரும் அட்டவணை அனைத்து CSS Flex Items பண்புகளையும் பட்டியலிடுகிறது: